<template>
	<div class='app' style="height: 900px" ref="homeBarRef"></div>
</template>

<script setup lang="ts" name="home">
	import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from 'vue';
	import * as echarts from 'echarts';
	import { http } from '@/api/http';
	import { ContentTypeEnum, RequestHttpEnum, ModuleTypeEnum } from '@/enums/httpEnum';
	// import diskData from './车间布局测试JSON数据.json'
	const homeBarRef = ref();


	const state = reactive({
		global: {
			homeChartOne: null,
			homeChartTwo: null,
			homeCharThree: null,
			dispose: [null, '', undefined],
		} as any,
		homeThree: [],
		myCharts: [] as EmptyArrayType,
		charts: {
			theme: '',
			bgColor: '',
			color: '#303133',
		},
	});
	const queryParams = ref<any>({});

	const getLevelOption = () => {
		return [
			{
				itemStyle: {
					borderColor: '#777',
					borderWidth: 0,
					gapWidth: 1
				},
				upperLabel: {
					show: false
				}
			},
			{
				itemStyle: {
					borderColor: '#555',
					borderWidth: 5,
					gapWidth: 1
				},
				emphasis: {
					itemStyle: {
						borderColor: '#ddd'
					}
				}
			},
			{
				colorSaturation: [0.35, 0.5],
				itemStyle: {
					borderWidth: 5,
					gapWidth: 1,
					borderColorSaturation: 0.6
				}
			}
		];
	}
	// 获取车间布局数据
	const getWorkshopLayout = async () => {
		var { data } = await http(RequestHttpEnum.GET)(`${ModuleTypeEnum.PROJECT}/workshopLayout`, null);
		return data;
	}
	// 柱状图
	const initBarChart = async () => {
		state.global.homeCharThree = markRaw(echarts.init(homeBarRef.value));
		var diskData = await getWorkshopLayout();
		const option = {
			// title: {
			// 	text: '车间布局',
			// 	left: 'center'
			// },
			tooltip: {
				formatter: function (info) {
					var statusName = ['未生产', '正常生产中', '不在线', '无订单生产']
					var value = info.value;
					var treePathInfo = info.treePathInfo;
					var treePath = [];
					for (var i = 1; i < treePathInfo.length; i++) {
						treePath.push(treePathInfo[i].name);
					}

					return [
						'<div class="tooltip-title">' +
						echarts.format.encodeHTML(treePath.join('/')) +
						'</div>',
						'加工状态:' + (value[2] == -1 ? '未知' : echarts.format.addCommas(statusName[value[2]]))
					].join('');
					// echarts.format.addCommas(value[2])
				}
			},
			series: [
				{
					name: '车间布局',
					type: 'treemap', //树形图类型
					visibleMin: 300,
					// leafDepth: 1,   //一次下钻深度
					// roam:'false',  //不能缩放平移
					top: 150,
					label: {
						show: true,
						formatter: '{b}'
					},
					upperLabel: {
						show: true,
						height: 30
					},
					itemStyle: {
						borderColor: '#fff'
					},
					// visualDimension: 1,//指定2『视觉映射』使用的是value数组的第3项
					levels: getLevelOption(),
					data: diskData,
					drillDownIcon: '▶'
				}
			]
		}

		//treemap这个组件不能用（动态点击事件）
		// state.global.homeCharThree.on("click", function (params) {
		// 	console.log(params);
		// 	if (params.componentType === "series") {
				
		// 	}
		// })
		// function func() {
		// 	// state.global.homeCharThree.click;
		// 	var dataLen = option.series[0].data.length;
		// 	currentIndex = (currentIndex + 1) % dataLen;
		// 	state.global.homeCharThree.dispatchAction({
		// 		type: "treemap",
		// 		seriesIndex: 0,
		// 		dataIndex: currentIndex,
		// 	});
			
		// }
		// let currentIndex = -1;
		// var timer = setInterval(func, 5000);
		
		
		state.global.homeCharThree.setOption(option);
		state.myCharts.push(state.global.homeCharThree);
	};


	// 批量设置 echarts resize
	const initEchartsResizeFun = () => {
		nextTick(() => {
			for (let i = 0; i < state.myCharts.length; i++) {
				setTimeout(() => {
					state.myCharts[i].resize();
				}, i * 1000);
			}
		});
	};
	// 批量设置 echarts resize
	const initEchartsResize = () => {
		window.addEventListener('resize', initEchartsResizeFun);
		
	};

	// 页面加载时
	onMounted(() => {
		initEchartsResize();
		initBarChart();
	});

	// 由于页面缓存原因，keep-alive
	onActivated(() => {
		// initEchartsResizeFun();
	});

	
</script>